<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 用于存储从 API 获取的数据
const chartData = ref([]);

// 区域名称映射到中文
const regionNameMapping = {
  'USA': '美国',
  'China': '中国',
  'Germany': '德国',
  'Japan': '日本',
  'South Korea': '韩国',
  'Europe': '欧盟',
  'France': '法国',
  'Other': '其他',
  'United Kingdom': '英国'
};

// 获取数据并更新图表
const fetchData = async () => {
  try {
    const response = await axios.get('/api/queryAllStockModeRegion'); // 替换为真实的 API URL
    if (response.data.code === '200') {
      const rawData = response.data.data;

      // 按照累计总数降序排序
      const sortedData = rawData.sort((a, b) => b.cumulativeTotal - a.cumulativeTotal);

      // 获取前六名数据
      const topSix = sortedData.slice(0, 6);

      // 计算其余国家的累计总和
      const otherTotal = sortedData.slice(6).reduce((sum, item) => sum + item.cumulativeTotal, 0);

      // 将其他国家汇总为 "其他"
      const finalData = topSix.map(item => ({
        value: item.cumulativeTotal,
        name: regionNameMapping[item.region] || item.region || item.name
      }));

      if (otherTotal > 0) {
        finalData.push({ value: otherTotal, name: regionNameMapping['Other'] });
      }

      // 更新 chartData
      chartData.value = finalData;

      // 更新图表
      updateChart();
    } else {
      console.error('Failed to load data:', response.data.msg);
    }
  } catch (error) {
    console.error('API request error:', error);
  }
};

// 更新图表
const updateChart = () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);

  const option = {
    title: {
      text: '世界六大新能源汽车产地',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#ffffff',
        fontFamily:'YouYuan' // 设置标题文字颜色为白色
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)' // 显示国家名称、值和百分比
    },
    grid: {
      top: "25%",
      left: "2%",
      right: "5%",
      bottom: "20%",
      containLabel: true,
    },
    legend: {
      orient: 'horizontal', // 设置为横向排列
      bottom: 0, // 放置在底部
      textStyle: {
        color: '#ffffff' // 设置图例文字颜色为白色
      }
    },
    color: ['#ff8c94', '#cabbe9', '#ffcef3', '#d59bf6', '#9896f1', '#8ef6e4', '#cadefc'], // 自定义颜色
    series: [
      {
        name: '国家',
        type: 'pie',
        radius: '60%',
        data: chartData.value,
        label: {
          color: '#ffffff', // 设置标签文字颜色为白色
          formatter: '{b}' // 仅显示名称
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option);
};

// 页面加载时请求数据
onMounted(() => {
  fetchData();
});
</script>

<template>
  <div>
    <div id="chart-container" style="width: 100%; height: 450px;top:20"></div>
  </div>
</template>

<style scoped>
#chart-container {
  width: 100%;
  height: 400px;
}
</style>
